<template>
	<!-- 分享share -->
	<view>
		<u-navbar title="我的分享" :autoBack="true" :placeholder="true" bgColor="#F8F9FE"></u-navbar>
		<view class="minBox">
			<image class="topBg" src="http://qiniu.suboshimuying.cn/static/user/downBg.png" mode=""></image>
			<image class="qrCode" :src="imgUrl" mode=""></image>
		</view>
		<view class="btnBox">
			<view class="preservation btn" @click="preservation">仅保存</view>

			<button class="shar btn" style="color: #fff;font-size: 32rpx;" open-type="share"
				@click="share">保存并分享</button>
				

		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				imgUrl: '', //保存的图片
			};
		},
		onLoad() {
			// that = this
			this.getmyQr()
		},
		methods: {
			// 保存并分享
			share() {
				let that = this
				uni.share({
					provider: "weixin",
					title: "uniapp",
					scene: "WXSceneSession",
					type: 1,
					summary: "米夸商城",
					success: function(res) {
						that.preservation()
						// console.log('1');
					},
					fail: function(err) {
						that.preservation()
						// console.log('2');
					}
				})
			},
			//保存
			preservation() {
				uni.showLoading({
					mask: true,
					title: "图片保存中"
				})
				uni.downloadFile({
					url: this.imgUrl, //图片地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功！"
									})
								},
								fail() {
									uni.hideLoading()
									uni.showToast({
										title: '保存失败',
										icon: 'error',
										duration: 2000
									})
								}
							});
						}
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: '图片地址错误',
							icon: 'error',
							duration: 2000
						})
					}
				});
			},
			async getmyQr() {
				let res = await this.$api.getmyQr()
				this.imgUrl = res.data.qroce
				// console.log(res);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.minBox {
		padding: 100rpx 61rpx 0;
		box-sizing: border-box;

		.topBg {
			position: absolute;
			width: 628rpx;
			height: 744rpx;
		}

		.qrCode {
			position: relative;
			width: 414rpx;
			height: 414rpx;
			margin: 94rpx 0 0 106rpx;
		}
	}

	.btnBox {
		display: flex;
		justify-content: space-between;
		margin-top: 312rpx;
		padding: 0 32rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.preservation {
			width: 328rpx;
			height: 88rpx;
			border-radius: 600rpx;
			opacity: 1;
			background: rgba(243, 241, 255, 1);
			color: rgba(128, 110, 254, 1);
			font-size: 32rpx;
			font-weight: 700;
		}

		.shar {
			width: 328rpx;
			height: 88rpx;
			border-radius: 600rpx;
			background: rgba(128, 110, 254, 1);

			button {
				position: relative;
				background: transparent;
				width: 100%;
				height: 100%;
				padding: 5rpx 0 0;
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
				font-weight: 700;

				&::after {
					border: none;
				}
			}
		}
	}
</style>
